<template>
	<view class="coupon">
		<view class="tab-page">
			<view class="tab">
				<u-tabs :list="tabList" :is-scroll="false" :current="current" bar-width="120" @change="change" bg-color="#f9f9f9" style="padding: 20rpx 0;"></u-tabs>
			</view>
			
			<view class="page-content">
				<scroll-view class="scroll-view" scroll-y>
					<view v-for="(item,index) in couponList" :key="index">
						<!-- 优惠券基础模板 -->
						<view class="coupon" v-if="type == '优惠券数据'">
							<view class="top">
								<u-icon name="more-dot-fill" color="#9e9e9e" size="44"></u-icon>
							</view>
							<view class="content">
								<view class="content-left">
									<view class="price" :style="{color:true ? '#2ba4f7' : '#9e9e9e'}">
										<text style="font-size: 16px;">￥</text>
										<text style="font-size: 25px;" >0.99</text>
									</view>
									<view class="require">
										<text>满￥1可用</text>
									</view>
								</view>
								<view class="content-right">
									<view class="name">
										<text>呃呃呃</text>
									</view>
									<view>
										<text style="margin-right: 20rpx;">店铺满减</text>
										<text>自定义推广</text>
									</view>
									<view>
										<text>有效期领取后15天有效</text>
									</view>
								</view>
							</view>
							<view class="coupon-bottom">
								<view class="bottom-left" @click='showCoupon'>
									<text style="margin-right: 16rpx;">数据</text>
									<u-icon name="arrow-up" color="#9e9e9e" size="24" v-if="showCouponData"></u-icon>
									<u-icon name="arrow-down" color="#9e9e9e" size="24" v-else></u-icon>
								</view>
								<view class="bottom-right" v-if="true">
									<button type="default">下载</button>
								</view>
							</view>
							<view class="info" v-if="showCouponData">
								<view class="info-item">
									<view class="info-item_top"><text>剩余数</text></view>
									<view class="info-item_bottom"><text>4</text></view>
								</view>
								<view class="info-item">
									<view class="info-item_top"><text>领取数</text></view>
									<view class="info-item_bottom"><text>0</text></view>
								</view>
								<view class="info-item">
									<view class="info-item_top"><text>使用数</text></view>
									<view class="info-item_bottom"><text>0</text></view>
								</view>
								<view class="info-item">
									<view class="info-item_top"><text>用券总金额</text></view>
									<view class="info-item_bottom"><text>￥0</text></view>
								</view>
							</view>
						</view>
							
					</view>
				</scroll-view>
				<tui-no-data imgUrl="https://sbb-sbb.oss-cn-shenzhen.aliyuncs.com/Open_source_project/mine/empty_bg.png" v-if="!couponList.length">暂无数据</tui-no-data>
			</view>
		</view>
		<view class="bottom">
			<navigator url='./add-coupon/add-coupon' class="btn"><text>创建优惠券</text></navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showCouponData:false,      //是否展示优惠券底部数据
				type:'优惠券数据',
				tabList: [{name: '生效中'}, {name: '已失效'}],     //顶部section选项列表
				current: 0,                                       //顶部section选择
				couponList:[
					{
						status:0,
						value:'11111111'
					},
					{
						status:0,
						value:'11111111'
					},
					{
						status:0,
						value:'11111111'
					},
					{
						status:0,
						value:'11111111'
					},
					{
						status:0,
						value:'11111111'
					},
					{
						status:1,
						value:'2222222'
					},
					{
						status:1,
						value:'2222222'
					},
					{
						status:1,
						value:'2222222'
					},
				]
			};
		},
		methods:{
			//顶部section改变
			change(index) {
				this.current = index;
			},
			//展示优惠券底部数据栏
			showCoupon(){
				this.showCouponData = !this.showCouponData
			},
		}
	}
</script>

<style lang="scss" scoped>
	.coupon{
		.tab-page{
			margin-bottom: 108rpx;
			.tab{
				z-index: 2;
				position: fixed;
				width: 100vw;
			}
			.page-content{
				padding-top: 60rpx;
				height: calc(100% - 184rpx);
				.scroll-view{
					height: 100%;
				}
			}
		}
		.bottom{
			position: fixed;
			bottom: 0;
			height: 108rpx;
			width: 100%;
			background-color: #fff;
			.btn{
				width: 80%;
				margin: 10rpx 10%;
				line-height: 88rpx;
				text-align: center;
				color: #fff;
				border-radius: 25rpx;
				background-color: #2ba4f7;
			}
		}
	}
	
	.coupon{
		margin: 30rpx 20rpx;
		border-radius: 40rpx;
		background-color: #fff;
		.top{
			display: flex;
			flex-direction: row-reverse;
			padding: 20rpx 40rpx 0;
		}
		.content{
			display: flex;
			margin-bottom: 0;
			.content-left{
				margin: 0 20rpx;
				padding-top: 24rpx;
				text-align: center;
				width: 160rpx;
				height: 160rpx;
				.price{
					margin-bottom: 10rpx;
					font-weight: 700;
				}
				.require{
					font-size: 12px;
					color:#9e9e9e;
				}
			}
			.content-right{
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin-left: 20rpx;
				color:#9e9e9e;
				font-size: 12px;
				.name{
					color:#000;
					font-size: 16px;
				}
			}
		}
		.coupon-bottom{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 40rpx 40rpx 40rpx;
			.bottom-left{
				color: #9e9e9e;
			}
			.bottom-right{
				button{
					width: 100px;
					height: 30px;
					line-height: 60rpx;
					text-align: center;
					font-size: 14px;
					color:#fff;
					background-color: #2ba4f7;
				}
			}
		}
		.info{
			display: flex;
			justify-content: space-around;
			text-align: center;
			border-top: 1px solid #e9e9e9;
			.info-item{
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				margin: 30rpx 0;
				height: 100rpx;
				.info-item_top{
					font-size: 12px;
					color:#9e9e9e;
				}
				.info-item_bottom{
					font-size: 15px;
				}
			}
		}
		
	}
	
</style>
